<template>
  <div class="silder flx">
    <div class="iconleft" :class="isshow_ir?'iconleft1':'iconleft2'">
      <div
        v-for="(item,index) in menuList"
        :key="item.menuId"
        class="bgw"
        :class="curIndexval==index?'iscut':'nocut'"
        @click="cutIndex(index)"
      >
        <icon-svg :name="item.icon || ''" class="icon_de_col"></icon-svg>

        <span class="txt_de_col" slot="title" v-show="!isshow_ir">{{item.name}}</span>
      </div>
      <div class="bottom_bgw" :class="isshow_ir?'iconleft1':'iconleft2'" @click="changeslide">
        <icon-svg name="zhedie" style="color:#fff"></icon-svg>
      </div>
    </div>
    <div class="iconright" v-show="isshow_ir">
      <aside>
        <el-menu
          :default-active="menuActiveName || 'sys-user'"
          :style="{ 'min-height': documentClientHeight + 'px' }"
        >
          <div class="tit">{{menuList[curIndexval].name}}</div>
          <sub-menu
            v-for="menu in menuList[curIndexval].list"
            :key="menu.menuId"
            :menu="menu"
            :dynamicMenuRoutes="dynamicMenuRoutes"
          ></sub-menu>
        </el-menu>
      </aside>
    </div>
  </div>
</template>
<script>
import SubMenu from "./main-sidebar-sub-menu";
import { isURL } from "@/utils/validate";

export default {
  name: "",
  data() {
    return {
      // curIndex: 0,
      dynamicMenuRoutes: [],
      isshow_ir: true
    };
  },
  components: {
    SubMenu
  },
  computed: {
    curIndexval: {
      get() {
        return this.$store.state.common.curIndex;
      },
      set(val) {
        this.$store.commit("common/updatacurIndex", val);
      }
    },
    documentClientHeight: {
      get() {
        return this.$store.state.common.documentClientHeight;
      },
      set(val) {
        this.$store.commit("common/updateDocumentClientHeight", val);
      }
    },
    sidebarLayoutSkin: {
      get() {
        return this.$store.state.common.sidebarLayoutSkin;
      }
    },
    sidebarFold: {
      get() {
        return this.$store.state.common.sidebarFold;
      }
    },
    menuList: {
      get() {
        return this.$store.state.common.menuList;
      },
      set(val) {
        this.$store.commit("common/updateMenuList", val);
      }
    },
    menuActiveName: {
      get() {
        return this.$store.state.common.menuActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMenuActiveName", val);
      }
    },
    mainTabs: {
      get() {
        return this.$store.state.common.mainTabs;
      },
      set(val) {
        this.$store.commit("common/updateMainTabs", val);
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.state.common.mainTabsActiveName;
      },
      set(val) {
        this.$store.commit("common/updateMainTabsActiveName", val);
      }
    }
  },
  watch: {
    $route: "routeHandle"
  },
  created() {
    this.curIndexval = JSON.parse(sessionStorage.getItem("cuerIndex") || 0);

    this.menuList = JSON.parse(sessionStorage.getItem("menuList") || "[]");
    this.dynamicMenuRoutes = JSON.parse(
      sessionStorage.getItem("dynamicMenuRoutes") || "[]"
    );
    console.log(this.dynamicMenuRoutes);

    this.routeHandle(this.$route);
  },
  methods: {
    changeslide() {
      this.isshow_ir = !this.isshow_ir;
    },
    cutIndex(index) {
      sessionStorage.setItem("cuerIndex", JSON.stringify(index || 0));
      this.isshow_ir = true;
      this.curIndexval = index;
      // this.curIndex = index;
    },
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        var tab = this.mainTabs.filter(item => item.name === route.name)[0];

        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(
              item => item.name === route.name
            )[0];
            if (!route) {
              return console.error("未能找到可用标签页!");
            }
          }
          tab = {
            menuId: route.meta.menuId || route.name,
            name: route.name,
            title: route.meta.title,
            type: isURL(route.meta.iframeUrl) ? "iframe" : "module",
            iframeUrl: route.meta.iframeUrl || "",
            params: route.params,
            query: route.query
          };
          this.mainTabs = this.mainTabs.concat(tab);
        }
        this.menuActiveName = tab.menuId + "";
        this.mainTabsActiveName = tab.name;
      }
    }
  }
};
</script>
<style  scoped >
.flx {
  display: flex;
  transition: width 0.5s;
}

.iconleft {
  position: relative;
  background-color: #2b3b54;
  /* transition: width 0.5s; */
}
.iconleft1 {
  width: 60px;
}

.iconleft2 {
  width: 230px;
}

.iconright {
  width: 171px;
  overflow-x: hidden;
  overflow-y: auto;
}
/* .iconright .el-men .el-menu-item span{
  display: inline-block;
  width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */
.icon_de_col {
  color: aliceblue;
  margin-left: 22px;
}

.txt_de_col {
  color: aliceblue;
  margin-left: 10px;
}

.iconleft2 .nocut:hover .txt_de_col {
  color: #5883ff;
}

.bgw {
  height: 48px;
  line-height: 48px;
  /* text-align: center; */
}
.nocut:hover {
  background-color: #212e44;
}
.bottom_bgw {
  height: 48px;
  line-height: 48px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: width 0.5s;
}
.iscut {
  background: #4a81ff;
}
.tit {
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  font-size: 20px;
  color: #1c1c1c;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
}
</style>